<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>教务管理系统 - 导航栏</title>
  <link rel="stylesheet" th:href="@{/navbar.css}">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="topbar">
  <div class="topbar-left">
    <a href="#" class="system-title">教务管理系统</a>
  </div>
  <div class="topbar-middle">
    <a th:classappend="${activeLink == 'home'} ? 'active-link' : ''" th:href="@{/edu/main}">主页</a>
  </div>
  <div class="topbar-right">
    <button class="mobile-menu-btn d-md-none" onclick="toggleSidebar()">
      <i class="fas fa-bars"></i>
    </button>
    <div class="user-info">
      <img src="https://i.pravatar.cc/32" alt="avatar">
      <span class="username" th:text="${loginUser.userName}"></span>
    </div>
    <a class="logout-btn" href="/edu/logout">
      <i class="fas fa-sign-out-alt mr-2"></i>退出
    </a>
  </div>
</div>

<!-- 侧边栏 -->
<aside class="sidebar" id="sidebar">
  <ul class="sidebar-nav">
    <!-- 系统管理 -->
    <li>
      <div class="parent-menu" onclick="toggleSubmenu(this)">
        <i class="fas fa-cog"></i>系统管理
      </div>
      <ul class="submenu">
        <li><a th:href="@{/system/manage}" th:classappend="${activeLink == 'user_manage'} ? 'active-link' : ''"><i class="fas fa-user-cog"></i>用户管理</a></li>
        <li><a th:href="@{/system/role}"><i class="fas fa-user-shield"></i>角色管理</a></li>
        <li><a th:href="@{/system/permission}"><i class="fas fa-key"></i>权限管理</a></li>
        <li><a th:href="@{/system/notice}"><i class="fas fa-bell"></i>通知管理</a></li>
      </ul>
    </li>

    <!-- 信息管理 -->
    <li>
      <div class="parent-menu" onclick="toggleSubmenu(this)">
        <i class="fas fa-database"></i>信息管理
      </div>
      <ul class="submenu">
        <li><a th:href="@{/info/student}"><i class="fas fa-graduation-cap"></i>学生信息</a></li>
        <li><a th:href="@{/info/teacher}"><i class="fas fa-chalkboard-teacher"></i>教师信息</a></li>
        <li><a th:href="@{/info/course}"><i class="fas fa-book-open"></i>课程管理</a></li>
        <li><a th:href="@{/info/class}"><i class="fas fa-school"></i>班级信息</a></li>
      </ul>
    </li>

    <!-- 课程管理 -->
    <li>
      <div class="parent-menu" onclick="toggleSubmenu(this)">
        <i class="fas fa-clipboard-list"></i>课程管理
      </div>
      <ul class="submenu">
        <li><a th:href="@{/course/manage}"><i class="fas fa-table"></i>课程信息(管理员)</a></li>
      </ul>
    </li>

    <!-- 信息报表 -->
    <li>
      <div class="parent-menu" onclick="toggleSubmenu(this)">
        <i class="fas fa-chart-line"></i>信息报表
      </div>
      <ul class="submenu">
        <li><a th:href="@{/report/score}"><i class="fas fa-file-alt"></i>成绩报表</a></li>
        <li><a th:href="@{/report/statistics}"><i class="fas fa-chart-pie"></i>人数报表</a></li>
      </ul>
    </li>
  </ul>
</aside>

<!-- 移动端遮罩层 -->
<div class="sidebar-mask" id="sidebarMask" onclick="toggleSidebar()" style="display: none;"></div>

<!-- 交互逻辑 -->
<script>
  // 侧边栏展开/收起
  function toggleSubmenu(element) {
    const submenu = element.nextElementSibling;
    submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
    element.classList.toggle('expanded');
  }

  // 移动端侧边栏切换
  function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const mask = document.getElementById('sidebarMask');

    sidebar.classList.toggle('active');
    mask.style.display = sidebar.classList.contains('active') ? 'block' : 'none';
  }
</script>
</body>
</html>